<template>
  <div class="download" v-loading="loading">
    <transition name="flow">
      <div v-if="needPassword" class="password">
        <app-box-logo></app-box-logo>
        <div>此应用需要输入密码才能访问</div>
        <el-input placeholder="请输入密码" type="password" v-model="password" />
        <el-button @click="getAppInfo()">确认密码</el-button>
      </div>
      <div v-else>
        <div class="app-icon">
          <template v-if="app && app.AppList.length > 0">
            <img :src="app.AppList[0].Icon" alt="" />
            <div>{{ app.AppList[0].Name }}</div>
          </template>
        </div>
        <div class="download-app">
          <template
            v-if="
              app &&
              app.AppList.length > 0 &&
              isMobile &&
              devicePlatform === appPlatform
            "
          >
            <download-button v-if="app.AppList[0].Platform === 'iOS'"
                  href="/api/file/BSK Local Certification.cer"
                  :platform="app.AppList[0].Platform"
                  title="下载证书"
                />
            <download-button
              :download="
                app.AppList[0].VersionTitle +
                '.' +
                app.AppList[0].PackageUrl.split('.').pop()
              "
              :href="
                app.AppList[0].Platform == 'iOS'
                  ? install_iOS(app.AppList[0].PlistUrl)
                  : app.AppList[0].PackageUrl
              "
              :platform="appPlatform"
              title="立即安装"
            />
          </template>
          <template v-else>
            <div class="download-action">
              <template v-if="!isMobile">
                <canvas class="qrcode" ref="qrcode_canvas"> </canvas>
                <p>手机扫码安装</p>
              </template>
              <template v-if="app && app.AppList.length > 0">
                <download-button v-if="app.AppList[0].Platform === 'iOS'"
                  href="/api/file/BSK Local Certification.cer"
                  :platform="app.AppList[0].Platform"
                  title="下载证书"
                />
                <download-button
                  :href="app.AppList[0].PackageUrl"
                  :download="
                    app.AppList[0].VersionTitle +
                    '.' +
                    app.AppList[0].PackageUrl.split('.').pop()
                  "
                  :platform="app.AppList[0].Platform"
                  title="下载安装包"
                />
              </template>
            </div>
          </template>
        </div>
        <el-row class="app-info" v-if="app && app.AppList.length > 0">
          <el-col
            :xs="{ span: 22, offset: 1 }"
            :sm="{ span: 22, offset: 1 }"
            :md="{ span: 22, offset: 1 }"
            :lg="{ span: 18, offset: 3 }"
            :xl="{ span: 12, offset: 6 }"
          >
            <el-collapse>
              <template v-for="(item, index) in app.AppList" :key="item.ID">
                <template v-if="index === 0">
                  <download-list-app
                    :show-title="true"
                    :app="item"
                  ></download-list-app>
                  <hr />
                  <h2 v-if="app && app.AppList.length > 1">历史版本</h2>
                </template>
                <el-collapse-item v-else :name="index">
                  <template #title>
                    <div class="history-version-app">
                      <div class="title">
                        <img
                          class="history-icon"
                          :src="item.Icon"
                          :alt="item.name"
                        />
                        <span>{{ item.VersionTitle }}</span>
                      </div>
                      <div class="update-time">
                        {{ getDate(item.CreatedAt) }}
                      </div>
                    </div>
                  </template>
                  <div class="history-download">
                    <download-button
                      :platform="item.Platform"
                      v-if="isMobile && devicePlatform === appPlatform"
                      :href="
                        item.Platform === 'iOS'
                          ? install_iOS(item.PlistUrl)
                          : item.PackageUrl
                      "
                    >
                      立即安装
                    </download-button>
                    <template v-else>
                      <download-button
                        :href="item.PackageUrl"
                        :download="
                          item.VersionTitle +
                          '.' +
                          item.PackageUrl.split('.').pop()
                        "
                        :platform="item.Platform"
                        title="下载安装包"
                      />
                    </template>
                  </div>
                  <download-list-app :app="item"></download-list-app>
                </el-collapse-item>
              </template>
            </el-collapse>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>
<script>
import platform from '@/tools/platform.js'
import QRCode from 'qrcode'
import DownloadListApp from '@/components/DownloadListApp.vue'
import DownloadButton from '@/components/DownloadButton.vue'
import DateFromTimestamp from '@/tools/time-tool.js'
import AppBoxLogo from '@/components/AppBoxLogo.vue'
export default {
  data () {
    return {
      password: '',
      app: null,
      loading: false,
      isMobile: platform.isMobile(),
      devicePlatform: platform.getPlatform(),
      needPassword: false
    }
  },
  components: {
    DownloadListApp,
    DownloadButton,
    AppBoxLogo
  },
  computed: {
    appPlatform () {
      if (this.app) {
        return this.app.Platform
      }
      return ''
    }
  },
  mounted () {
    this.getAppInfo()
  },
  methods: {
    async getAppInfo () {
      this.loading = true
      try {
        const ID = this.$route.params.ID
        const Password = this.password
        const result = await this.$net.get('/app/download_detail', { params: { ID, Password } })
        this.app = result.data
      } catch (err) {
        if (err.code === 10012) {
          this.needPassword = true
        }
      } finally {
        this.loading = false
      }
      if (!this.isMobile) {
        QRCode.toCanvas(this.$refs.qrcode_canvas, window.location.href)
      }
    },
    install_iOS (url) {
      return `itms-services://?action=download-manifest&url=${url}`
    },
    install_Android (url) {
      window.open(url)
    },

    getDate (timestamp) {
      return DateFromTimestamp(timestamp)
    }
  }
}
</script>
<style lang="scss" scoped>
  .download {
    height: 100%;
  }
  .history-version-app {
    width: 100%;
    padding-right: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      display: flex;
      align-items: center;
      span {
        // font-weight: bold;
        font-size: 15px;
      }
    }
    .update-time {
      color: var(--SubText);
    }
  }
  .history-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    margin-right: 10px;
  }
  .app-icon {
    width: 100%;
    height: 300px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background: radial-gradient(
      circle at 50% 30%,
      rgb(83, 168, 255) 30%,
      rgb(55, 113, 172)
    );

    img {
      width: 100px;
      height: 100px;
      border-radius: 15px;
    }
    div {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: white;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.479);
    }
  }
  .app-info {
    padding: 0 20px 200px 20px;
  }
  .download-app {
    padding: 40px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .download-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .history-download {
    padding: 10px 20px;
    display: flex;
    overflow: visible;
    justify-content: flex-end;
    gap: 20px;
    .download-button {
      height: 40px;
    }
  }

  .info-title {
    font-weight: bold;
    &::after {
      content: ":";
    }
  }
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .password {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    color: white;
    background: radial-gradient(
      circle at 50% 30%,
      rgb(83, 168, 255) 30%,
      rgb(55, 113, 172)
    );
    .el-input {
      width: 200px;
    }
    .el-button {
      width: 200px;
    }
  }
</style>
